<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main style="position:absolute;left:15px;top:15px;background-color:white;box-shadow:0 0 3px gray;">
          <div id="sketch" style="width:100%;margin-bottom:10px;"></div>
          <el-button @click="重置" type="danger">重置</el-button>
          <el-button @click="相交分析" type="primary">相交分析</el-button>
        </el-main>
   </div>
</template>
  
<script setup>
/*说明---
  1:创建两个图形图层对象graphicsLayer1和graphicsLayer2,分别用于存储输入图形和相交图形
  2:执行结果图形集合暂时存放到临时变量graphics中,
  3:创建sketch小部件用于绘制输入图形,sketchViewModel对象用于绘制相交图形
*/
  import * as 天地图 from '../天地图'
  import {onMounted} from 'vue'
  import Map from '@arcgis/core/Map'
  import MapView from '@arcgis/core/views/MapView'
  import * as geometryEngine from "@arcgis/core/geometry/geometryEngine.js"
  import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel'
  import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
  import Sketch from '@arcgis/core/widgets/Sketch'
  var map,view,graphicsLayer1,graphicsLayer2,sketch,sketchViewModel
  var graphics=[]
  const 相交分析=()=>{//判断graphicsLayer1图层是否有图形,如果没有则打断执行,如果有则绘制相交图形
    if(graphicsLayer1.graphics.length===0){
      return
    }
    sketchViewModel.create("polygon",{mode:'click'})
  }
  const 重置=()=>{
    graphicsLayer1.graphics.removeAll()
    graphicsLayer2.graphics.removeAll()
    graphics=[]
  }
  onMounted(()=>{
    graphicsLayer1=new GraphicsLayer()
    graphicsLayer2=new GraphicsLayer()
    map=new Map({
        basemap:{
          baseLayers:天地图.天地图矢量
        },
        layers:[graphicsLayer1,graphicsLayer2]
    })
    view=new MapView({
        map:map,
        container:"viewDiv",
        center:[120.4,36.1],
        zoom:15,
        constraints:{
            rotationEnabled:false,
            maxScale:2000
        }
    })
    view.ui.remove(["zoom","attribution"])
    sketch=new Sketch({//创建绘图工具小部件
      view:view,//绑定视图对象
      layer:graphicsLayer1,
      container:"sketch"
    })
    sketchViewModel=new SketchViewModel({
      view:view,
      layer:graphicsLayer2
    })
    sketchViewModel.on("create",(event)=>{//创建相交图形事件的处理函数
      if(event.state==="complete"){
        //👇方法具有两个参数,第一参数表示输入图形的几何或输入图形的几何的集合,第二参数表示相交图形的几何
        //👇输出结果是几何还是几何的集合取决于第一参数是几何还是几何的集合
        graphics=geometryEngine.intersect(graphicsLayer1.graphics.items.map((item)=>{
          return item.geometry
        }),event.graphic.geometry).map((item)=>{
          return {
            geometry:item,
            symbol:item.type==="polygon"?sketch.viewModel.polygonSymbol:(item?.type==="polyline"?sketch.viewModel.polylineSymbol:sketch.viewModel.pointSymbol)
            //👆根据不同的几何类型,赋值不同类型的符号
          }
        })//执行相交计算并将结果存放到graphics3
        graphicsLayer1.graphics.removeAll()
        graphicsLayer2.graphics.removeAll()
        graphicsLayer1.graphics=graphics//清空并将结果服存放到graphicsLayer1
        graphics=[]
      }
    })
  })
</script>

<style scoped>
  #container,#viewDiv{
  width:100%; height:100%; padding:0;margin:0;
  }
</style>
  